<template>
	<view>
		<navbar  :title="(type==='c'?'新增':'编辑')+'地址'" :isGoBack="true" :isNotice="true" :visible="true" :bgColor="bgColor" :btnColors='btnColor'></navbar>
		<view class="opinion_wrap mt-20" >
		   <form bindsubmit="formSubmit" class="pl-10 pr-10">
			   
			 <view class="flex ml-10 mr-10 flex-direction" style="border-radius: 16rpx;width: 108%;background-color: #fff;">
					<view class="flex uni-form-item all_shop border-b">
						<view class="title" style="width: 125rpx;">联系人</view>
						<input class="uni-input ml-10" v-model="formData.linkname" focus placeholder="请填写收货人姓名"  placeholder-style='text-align:right;padding-right:20rpx' style="width: 100%;text-align: right; padding-right:20rpx"/>
					</view>		  

					<view class="flex uni-form-item all_shop border-b">
						<view class="title" style="width: 185rpx;">联系方式</view>
						<input class="uni-input ml-30" v-model="formData.phone" focus placeholder="请填写联系手机" placeholder-style='text-align:right;padding-right:20rpx' style="width: 100%;text-align: right; padding-right:20rpx"/>
					</view>

					<view class="flex uni-form-item all_shop border-b" @click="getbox()">			  	
						<view class="title" style="width: 185rpx;">省市区</view>
						<input class="uni-input ml-30" v-model="formData.area_info" focus placeholder="请输入所在地区"  disabled  placeholder-style="text-align:right;padding-right:20rpx" style="width: 100%;text-align: right; padding-right:20rpx"/>
					    <u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"></u-icon>
					</view>	
							  
					<view class="flex uni-form-item all_shop border-b" style="height: 230rpx;">
						<view class="title" style="width: 185rpx;">详细地址</view>
						<textarea v-model="formData.address" focus placeholder="请填写小区、街道、门牌号等信息" placeholder-style='text-align:right;padding-right:20rpx;margin-top:10rpx' style="padding-top: 65rpx;padding-left: 40rpx;width: 71%;display: flex;height: 100rpx;text-align:right;" ></textarea>
						<!-- <input class="uni-input ml-30" v-model="formData.address" focus placeholder="请输入详细地址"   style="width: 80%;"/> -->
					</view>	
			 </view>  
			
					
			<view class="flex  all_shop border-b ml-10 mr-20 flex-direction mt-30" >
				<view class="bg-white p-20 flex justify-between pr-20"  style="border-radius: 16rpx;width: 108%;background-color: #fff;">
					<text class="ml-10">设为默认地址</text>
				    <u-switch v-model="check_addres" @change="is_def" activeColor="#36B3E9" size="22"></u-switch>			 
				</view>				
			</view>			
			  
			<button @click="submit">保存</button>
		  </form>
		  <u-picker :show="show" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler" @cancel="show = false"></u-picker>
		</view>  
	</view>
</template>

<script>	       
    // import areaList from '@/utils/address-data.js';  //文章最后附有下载地址，免费的
	import cityData from '@/utils/city.js'
	export default {
		data () {
			return {
				...getApp().globalData.config,				
				formData: {
				    linkname: '',
				    phone: '',
				    address: '',
					province: '',
					city:'',
					area:''				
				},
				area_info:'',
				type: 'c',
				check_addres:true,
				check_index:1,
				//地址展示框
				show: false,
				// 打开选择器显示默认城市
				cityList: [],				                
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
				item:[],
				router:'',
				options:{},
				
			}			
		},
		
		onLoad(e) {
			if(e.type){
				this.type=e.type
			}
			if(e.item){
				let item=JSON.parse(e.item)				
				this.formData.id=item.id
				this.formData.linkname=item.realname
				this.formData.check_index=item.is_gender
				this.formData.phone=item.phone
				this.formData.province=item.province
				this.formData.city=item.city
				this.formData.area=item.region
				this.formData.area_info=item.province+','+item.city+','+item.region
				this.formData.address=item.address
				this.check_addres=item.is_default
			}
			// 城市选择器初始化
			this.initCityData();
			
			
			
		},
		created() {
			let pages = getCurrentPages() // 获取栈实例
			let prevPage = pages[pages.length - 2] // 获取上个页面的数据，包含页面
			// console.log('prevPage',prevPage.route)
			this.router=prevPage.route
			this.options=prevPage.options
		},
		
		
		
		methods:{
			 ...getApp().globalData.function,
			initCityData(){
				// 遍历城市js
				cityData.forEach((item1, index1) =>{
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);
					
					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) =>{
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) =>{
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;
					
					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1,this.cityLevel2[0],this.cityLevel3[0][0]);
			},
			// 选中时执行
			changeHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				}else if(columnIndex === 1){// 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},
			// 单击确认按钮时执行
			confirm(e) {
				// 输出数组 [省, 市, 区]
				this.formData.province=e.value[0]
				this.formData.city=e.value[1]
				this.formData.area=e.value[2]
				this.formData.area_info=e.value.join(',')
				// 隐藏城市选择器
				this.show = false;
			},
			
			
			getbox(){
				this.show = true;
			},
					
					
			radioChange(type){
				console.log(type);
				this.check_index=type.detail.value
			},
			is_def(e){
			    // let check_addres = this.check_addres
			    // if(check_addres==0){
			    //  this.check_addres=1
			    // }else{
			    //  this.check_addres=0
			    // }
			},
			
			submit(e){
				let formData=this.formData
				formData.is_default=this.check_addres?1:0
				formData.is_gender=this.check_index

				if(!formData.linkname){
					this.$showToast('请填写收货人信息！')
					return false
				}
				if(!formData.phone){
					this.$showToast('请填写联系方式信息！')
					return false
				}
				if(!formData.province || !formData.city || !formData.area){
					this.$showToast('请填写所在地区信息！')
					return false
				}
				if(!formData.address){
					this.$showToast('请填写详细地址信息！')
					return false
				}
				
				formData.token=uni.getStorageSync('userInfo').token
				
				this.$http.PostAddress(formData).then(res=>{
					if(res.resCode=='9999'){
					    this.$showToast(res.resMessage)						
						let router='/pages/pagesuser/address/index'		
						if(this.router && this.router=='pages/pagesOrder/confirm/index' ){
							if(uni.getStorageSync('shop_type')=='carts'){
								router='/pages/pagesOrder/confirm/index?carIds='+this.options.carIds
							} else {
								router='/pages/pagesOrder/confirm/index?value='+this.options.value+"&type=1"
							}
						   
							
						}else if(this.router && this.router=='pages/pagesuser/points/settlement' ){
							router='/pages/pagesuser/points/settlement?goodsId='+this.options.goodsId+"&addressId="+res.data.addressId
						}else if(this.router && this.router=='pages/front/confirm/index' ){
							let carInfos=this.options.carInfo
							router='/pages/front/confirm/index?carInfo='+carInfos
						}								  
						setTimeout(function(){
						    uni.navigateTo({
						    	url:router
						    })
						}, 1500)
					}else{
					    this.$showToast(res.resMessage)
					    return false	
					}  
				})				
			},
			
			
		}
	}
</script>

<style>
	page{
		background-color: #F0F9FE ;
	}
	input::placeholder {
		  text-align: right;
		}
		.opinion_wrap{
			display: flex;
			flex-wrap: wrap;	
			flex-direction: row;
		}
		button::after{
			border: none;
		}
		.box{
		  position: absolute;
		  left: 0;
		  bottom: 0;
		  overflow: hidden;
		  width: 100%;
		  height: 100vh;
		  z-index: 8;
		}
		.black{
		  position: absolute;
		  left: 0;
		  top: 0;
		  width: 100%;
		  height: 100vh;
		  background: rgba(0, 0, 0, .5);
		  z-index: 10;
		}
		.nr{
		  position: absolute;
		  left: 0;
		  bottom: 0;
		  width: 100%;
		  height: 500rpx;
		  z-index: 12;
		  background: #FFF;
		}
		.item{
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  width: 100%;
		  height: 100rpx;
		  line-height: 100rpx;
		  padding: 0 20rpx;
		  box-sizing: border-box;
		  border-bottom: 1px solid #EEE;
		}
	
		
		.uni-form-item{
			display: flex;
			flex-direction: row;
			/* justify-content: center; */
			align-items: center;
			height: 90rpx;
			font-size: 30rpx;
			padding-left: 45rpx;		
		}
		.a-picker-view-picker-indicator {
		  height: 80rpx !important;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		}
		button{
			display: flex;
			flex-direction: row;
			justify-content: center;
			color: white;
			border: none;
			width: 85%;
			padding: 5rpx 0rpx;
			position: absolute; /* 设置按钮为绝对定位 */
			bottom: 0; /* 距离底边为0 */
			left: 50%; /* 左侧距离父元素宽度的50% */
			transform: translateX(-50%); /* 向左移动自身宽度的50%，保持水平居中 */	
			background:  #36B3E9;
			border-radius: 40rpx;
			font-size: 30rpx;
			height: 88rpx;
			margin-bottom: 25rpx;
		}
</style>